import {Grid, List, ListItem} from "@material-ui/core";
import {ArrowDownward, ArrowUpward} from "@material-ui/icons";
import * as React from 'react';
import HospitalInfo from "../../components/HospitalInfo";
import Info from "../../components/Info";
import {hospitalListFetch} from "../../store/modules/hospital/action";
import {AppPageProps} from "../../types/AppPageProps";
import withRoot from "../../withRoot";
import CardHeader from "../mymedicalcard/CardHeader";
import Detail from "./Detail";

interface Doctor {
    id: string
}

interface Depart {
    id: string,
    detail: string,
    doctors: Doctor[]
}

interface DepartListProps extends AppPageProps {
    expands: string,
    list: Depart[],
    query: any
}

class HospitalList extends React.Component<DepartListProps> {

    public query = {
        max: "desc",
        level: "desc",
        _sort: "detail.max",
        _order: "desc"
    };

    public handleClick = (id: string) => {
        this.props.history.push({
            pathname: "/depart/list",
            state: {id}
        });
    };

    public sourceClick = (id: string) => {
        // this.props.dispatch(hospiE);
    };

    public componentWillMount() {
        this.sort(this.query);
    }

    public sort(options: object) {
        const {_sort, _order} = Object.assign(this.query, options);

        this.props.dispatch(hospitalListFetch({
            _sort, _order
        }));
    }

    public render() {
        const {expands, list = []} = this.props;
        return (
            <List
                component="div"
                subheader={
                    <div>
                        <CardHeader
                            title={"医院列表"}
                            diplayButton={false}
                        />
                        <Grid container={true} className={"padding-v"} style={{textAlign: "center"}}>
                            <Grid item={true} xs={4}/>
                            <Grid item={true} xs={4} onClick={
                                this.sort.bind(this, {
                                    _sort: "detail.max",
                                    _order: this.query.max === "desc" ? "asc" : "desc",
                                    max:this.query.max === "desc" ? "asc" : "desc"
                                })
                            }>预约量
                                {this.query.max !== "desc" ? <ArrowUpward className={"icon-font"}/> :
                                    <ArrowDownward className={"icon-font"}/>}
                            </Grid>
                            <Grid item={true} xs={4} onClick={
                                this.sort.bind(this, {
                                    _sort: "level",
                                    _order: this.query.level === "desc" ? "asc" : "desc",
                                    level: this.query.level === "desc" ? "asc" : "desc"
                                })
                            }>医院等级
                                {this.query.level !== "desc" ? <ArrowUpward className={"icon-font"}/> :
                                    <ArrowDownward className={"icon-font"}/>}
                            </Grid>
                        </Grid>
                    </div>
                }
            >
                {
                    list.map((each, index) => {
                        const {id, detail} = each;
                        return <ListItem key={id} button={true}>
                            <Info
                                sourceClick={this.sourceClick.bind(this, id)}
                                expands={true}
                                data={each}
                                detail={
                                    <Detail detail={detail}/>
                                }
                                showDivider={index !== list.length - 1}
                            >
                                <HospitalInfo itemClick={this.handleClick.bind(this, id)} data={each} id={id}/>
                            </Info>
                        </ListItem>;
                    })
                }
            </List>
        );
    }
}

export default withRoot(HospitalList);